<template>
  <div>
<!--    <el-button type="primary" plain @click="onOpen">收藏这个商品</el-button>-->
    <el-drawer
      v-model="state.dialogVisible"
      title="编辑"
      :size="'80%'"
      @close="handleDialogClose"
      :close-on-click-modal="false"
      direction="rtl">
      <div>
        <el-form v-if="state.dialogVisible" ref="submitListingFormRef" label-position="left" label-width="120px" :model="submitListing">

          <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item label="选择模板" prop="templateId" :rules="[{ required: true, message: '请选择模板', trigger: 'change' }]">
                  <el-select v-model="submitListing.templateId" placeholder="请选择模板" style="width: 100%">
                    <el-option v-for="item in templateList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
            </el-col>
          </el-row>
          <!-- 通用字段 -->
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="产品型号名称" prop="modelName" :rules="[{ required: true, message: '请输入产品型号名称', trigger: 'blur' }]">
                <el-input v-model="submitListing.modelName" maxlength="100" show-word-limit placeholder="产品型号名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="产品型号" prop="modelNumber" :rules="[{ required: true, message: '请输入产品型号', trigger: 'blur' }]">
                <el-input v-model="submitListing.modelNumber" maxlength="100" show-word-limit placeholder="产品型号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="产品外部类型" prop="standardProductIdType" :rules="[{ required: true, message: '请选择产品外部ID类型', trigger: 'change' }]">
                <el-select v-model="submitListing.standardProductIdType" placeholder="ENA/UPC/GTIN" style="width: 100%">
                  <el-option label="豁免" value="exemption"></el-option>
                  <el-option label="EAN" value="ean"></el-option>
                  <el-option label="UPC" value="upc"></el-option>
                  <el-option label="GTIN" value="gtin"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="submitListing.standardProductIdType !== 'exemption'" label="产品外部ID值" prop="standardProductIdValue" :rules="[{ required: true, message: '请输入产品外部ID值', trigger: 'blur' }]">
                <el-input v-model="submitListing.standardProductIdValue" maxlength="100" show-word-limit placeholder="产品外部ID值"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="产品描述" prop="description" :rules="[{ required: true, message: '请输入产品描述', trigger: 'blur' }]">
            <el-input type="textarea" :rows="5" v-model="submitListing.description" maxlength="2500" show-word-limit placeholder="产品描述" style="width: 100%"></el-input>
          </el-form-item>

          <!-- 通用属性字段 -->
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="颜色" prop="color" :rules="[{ required: true, message: '请输入颜色', trigger: 'blur' }]">
                <el-input v-model="submitListing.color" maxlength="100" show-word-limit placeholder="颜色"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单位数量" prop="unitCount" :rules="[{ required: true, message: '请输入单位数量', trigger: 'blur' }]">
                <el-input v-model="submitListing.unitCount" maxlength="50" placeholder="单位数量"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="是否需要组装" prop="isAssemblyRequired" :rules="[{ required: true, message: '请选择是否需要组装', trigger: 'change' }]">
                <el-switch v-model="submitListing.isAssemblyRequired" active-text="是" inactive-text="否"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="危险品规管" prop="supplierDeclaredDgHzRegulation" :rules="[{ required: true, message: '请选择危险品规管', trigger: 'blur' }]">
                <el-select v-model="submitListing.supplierDeclaredDgHzRegulation" placeholder="请选择危险品规管">
                  <el-option v-for="dict in getIntDictOptions2('supplierDeclaredDgHzRegulation')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>


          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="配送方式" prop="fulfillmentChannelCode" :rules="[{ required: true, message: '请选择配送方式', trigger: 'blur' }]">
                <el-select v-model="submitListing.fulfillmentChannelCode" placeholder="请选择配送方式">
                  <el-option v-for="dict in getIntDictOptions2('fulfillmentChannelCode')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="箱子数量" prop="numberOfBoxes" :rules="[{ required: true, message: '请输入箱子数量', trigger: 'blur' }]">
                <el-input v-model="submitListing.numberOfBoxes" placeholder="箱子数量"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="包裹尺寸" prop="packageSize" :rules="[{ required: true, message: '请输入包裹尺寸', trigger: 'blur' }]">
                <el-input v-model="submitListing.packageSize" placeholder="包裹尺寸"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="包裹重量" prop="packageWeight" :rules="[{ required: true, message: '请输入包裹重量', trigger: 'blur' }]">
                <el-input v-model="submitListing.packageWeight" placeholder="包裹重量"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="是否需要电池" prop="batteriesRequired" :rules="[{ required: true, message: '请选择是否需要电池', trigger: 'change' }]">
                <el-switch v-model="submitListing.batteriesRequired" active-text="是" inactive-text="否"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="5" v-if="submitListing.batteriesRequired">
              <el-form-item label="是否提供电池" prop="batteriesIncluded" :rules="[{ required: true, message: '请选择是否提供电池', trigger: 'change' }]">
                <el-switch v-model="submitListing.batteriesIncluded" active-text="是" inactive-text="否"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="submitListing.batteriesIncluded">
              <el-form-item label="电池类型" label-width="100px" prop="cellComposition" :rules="[{ required: true, message: '请选择电池类型', trigger: 'change' }]">
                <el-select v-model="submitListing.cellComposition" placeholder="请选择电池类型">
                  <el-option v-for="dict in getIntDictOptions2('cellComposition')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 座位所需字段 -->
          <template v-if="submitListing.productType === 'CHAIR'">
            <h3 class="type-title">座位属性</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="材料" prop="material" :rules="[{ required: true, message: '请选择材料', trigger: 'blur' }]">
                  <el-select v-model="submitListing.material" placeholder="请选择材料">
                    <el-option v-for="dict in getIntDictOptions2('CHAIR-material')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="商品状况" prop="conditionType" :rules="[{ required: true, message: '请选择商品状况', trigger: 'blur' }]">
                  <el-select v-model="submitListing.conditionType" placeholder="请选择商品状况">
                    <el-option v-for="dict in getIntDictOptions2('CHAIR-conditionType')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="包含组件" prop="includedComponents" :rules="[{ required: true, message: '请选择包含组件', trigger: 'blur' }]">
                  <el-select v-model="submitListing.includedComponents" placeholder="请选择包含组件">
                    <el-option v-for="dict in getIntDictOptions2('CHAIR-includedComponents')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="形状" prop="itemShape" :rules="[{ required: true, message: '请选择形状', trigger: 'blur' }]">
                  <el-select v-model="submitListing.itemShape" placeholder="请选择形状">
                    <el-option v-for="dict in getIntDictOptions2('CHAIR-itemShape')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="座位靠背净高" prop="seatBackInteriorHeight" :rules="[{ required: true, message: '请输入座位靠背净高', trigger: 'blur' }]">
                  <el-input v-model="submitListing.seatBackInteriorHeight" placeholder="座位靠背净高"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="座位深度" prop="seatDepth" :rules="[{ required: true, message: '请输入座位深度', trigger: 'blur' }]">
                  <el-input v-model="submitListing.seatDepth" placeholder="座位深度"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="座位高度" prop="seatHeight" :rules="[{ required: true, message: '请输入座位高度', trigger: 'blur' }]">
                  <el-input v-model="submitListing.seatHeight" placeholder="座位高度"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="最大可取重量" prop="maximumWeightRecommendation" :rules="[{ required: true, message: '请输入最大可取重量', trigger: 'blur' }]">
                  <el-input v-model="submitListing.maximumWeightRecommendation" placeholder="最大可取重量"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="座位材料" prop="seatMaterialType" :rules="[{ required: true, message: '请选择座位材料类型', trigger: 'blur' }]">
                  <el-select v-model="submitListing.seatMaterialType" placeholder="请选择座位材料类型">
                    <el-option v-for="dict in getIntDictOptions2('CHAIR-seatMaterialType')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结构框架材料" prop="framemMaterial" :rules="[{ required: true, message: '请选择结构框架材料', trigger: 'blur' }]">
                  <el-select v-model="submitListing.framemMaterial" placeholder="请选择结构框架材料">
                    <el-option v-for="dict in getIntDictOptions2('CHAIR-framemMaterial')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="是否易碎品" prop="isFragile" :rules="[{ required: true, message: '请选择是否易碎品', trigger: 'change' }]">
              <el-switch v-model="submitListing.isFragile" active-text="是" inactive-text="否"></el-switch>
            </el-form-item>
          </template>

          <!-- 桌子所需字段 -->
          <template v-if="submitListing.productType === 'DESK'">
            <h3 class="type-title">桌子属性</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="材料" prop="material" :rules="[{ required: true, message: '请选择材料', trigger: 'blur' }]">
                  <el-select v-model="submitListing.material" placeholder="请选择材料">
                    <el-option v-for="dict in getIntDictOptions2('DESK-material')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="商品状况" prop="conditionType" :rules="[{ required: true, message: '请选择商品状况', trigger: 'blur' }]">
                  <el-select v-model="submitListing.conditionType" placeholder="请选择商品状况">
                    <el-option v-for="dict in getIntDictOptions2('DESK-conditionType')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="包含组件" prop="includedComponents" :rules="[{ required: true, message: '请选择包含组件', trigger: 'blur' }]">
                  <el-select v-model="submitListing.includedComponents" placeholder="请选择包含组件">
                    <el-option v-for="dict in getIntDictOptions2('DESK-includedComponents')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="形状" prop="itemShape" :rules="[{ required: true, message: '请选择形状', trigger: 'blur' }]">
                  <el-select v-model="submitListing.itemShape" placeholder="请选择形状">
                    <el-option v-for="dict in getIntDictOptions2('DESK-itemShape')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="桌面设计" prop="deskDesign" :rules="[{ required: true, message: '请选择桌面设计', trigger: 'change' }]">
                  <el-select v-model="submitListing.deskDesign" placeholder="请选择桌面设计">
                    <el-option v-for="dict in getIntDictOptions2('DESK-deskDesign')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="最大可取重量" prop="maximumWeightRecommendation" :rules="[{ required: true, message: '请输入最大可取重量', trigger: 'blur' }]">
                  <el-input v-model="submitListing.maximumWeightRecommendation" placeholder="最大可取重量"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="基础颜色" prop="baseColor" :rules="[{ required: true, message: '请选择基础颜色', trigger: 'blur' }]">
                  <el-select v-model="submitListing.baseColor" placeholder="请选择基础颜色">
                    <el-option v-for="dict in getIntDictOptions2('DESK-baseColor')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="基础材料" prop="baseMaterial" :rules="[{ required: true, message: '请选择基础材料', trigger: 'blur' }]">
                  <el-select v-model="submitListing.baseMaterial" placeholder="请选择基础材料">
                    <el-option v-for="dict in getIntDictOptions2('DESK-baseMaterial')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="表面处理类型" prop="finishType" :rules="[{ required: true, message: '请选择表面处理类型', trigger: 'blur' }]">
                  <el-select v-model="submitListing.finishType" placeholder="请选择表面处理类型">
                    <el-option v-for="dict in getIntDictOptions2('DESK-finishType')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结构框架材料" prop="framemMaterial" :rules="[{ required: true, message: '请选择结构框架材料', trigger: 'blur' }]">
                  <el-select v-model="submitListing.framemMaterial" placeholder="请选择结构框架材料">
                    <el-option v-for="dict in getIntDictOptions2('DESK-framemMaterial')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="顶部颜色" prop="topColor" :rules="[{ required: true, message: '请选择顶部颜色', trigger: 'blur' }]">
                  <el-select v-model="submitListing.topColor" placeholder="请选择顶部颜色">
                    <el-option v-for="dict in getIntDictOptions2('DESK-topColor')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="顶部材料" prop="topMaterial" :rules="[{ required: true, message: '请选择顶部材料', trigger: 'blur' }]">
                  <el-select v-model="submitListing.topMaterial" placeholder="请选择顶部材料">
                    <el-option v-for="dict in getIntDictOptions2('DESK-topMaterial')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="特别功能" prop="specialFeature" :rules="[{ required: true, message: '请选择特别功能', trigger: 'blur' }]">
                  <el-select v-model="submitListing.specialFeature" placeholder="请选择特别功能">
                    <el-option v-for="dict in getIntDictOptions2('DESK-specialFeature')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </template>


          <!-- 柜子所需字段 -->
          <template v-if="submitListing.productType === 'CABINET'">
            <h3 class="type-title">柜子属性</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="材料" prop="material" :rules="[{ required: true, message: '请选择材料', trigger: 'blur' }]">
                  <el-select v-model="submitListing.material" placeholder="请选择材料">
                    <el-option v-for="dict in getIntDictOptions2('CABINET-material')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="商品状况" prop="conditionType" :rules="[{ required: true, message: '请选择商品状况', trigger: 'blur' }]">
                  <el-select v-model="submitListing.conditionType" placeholder="请选择商品状况">
                    <el-option v-for="dict in getIntDictOptions2('CABINET-conditionType')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="包含组件" prop="includedComponents" :rules="[{ required: true, message: '请选择包含组件', trigger: 'blur' }]">
                  <el-select v-model="submitListing.includedComponents" placeholder="请选择包含组件">
                    <el-option v-for="dict in getIntDictOptions2('CABINET-includedComponents')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="形状" prop="itemShape" :rules="[{ required: true, message: '请选择形状', trigger: 'blur' }]">
                  <el-select v-model="submitListing.itemShape" placeholder="请选择形状">
                    <el-option v-for="dict in getIntDictOptions2('CABINET-itemShape')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="适合房型" prop="roomType" :rules="[{ required: true, message: '请选择适合房型', trigger: 'blur' }]">
                  <el-select v-model="submitListing.roomType" placeholder="请选择适合房型">
                    <el-option v-for="dict in getIntDictOptions2('CABINET-roomType')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="安装类型" prop="mountingType" :rules="[{ required: true, message: '请选择安装类型', trigger: 'blur' }]">
                  <el-select v-model="submitListing.mountingType" placeholder="请选择安装类型">
                    <el-option v-for="dict in getIntDictOptions2('CABINET-mountingType')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="抽屉数量" prop="numberOfDrawers" :rules="[{ required: true, message: '请输入抽屉数量', trigger: 'blur' }]">
                  <el-input v-model.number="submitListing.numberOfDrawers" placeholder="抽屉数量"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="面料类型" prop="fabricType" :rules="[{ required: true, message: '请输入面料类型', trigger: 'blur' }]">
                  <el-input v-model="submitListing.fabricType" maxlength="100" placeholder="面料类型"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="柜门开启方向" prop="doorOrientation" :rules="[{ required: true, message: '请选择柜门开启方向', trigger: 'change' }]">
                  <el-select v-model="submitListing.doorOrientation" placeholder="请选择柜门开启方向">
                    <el-option v-for="dict in getIntDictOptions2('CABINET-doorOrientation')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="柜门风格" prop="doorStyle" :rules="[{ required: true, message: '请选择柜门风格', trigger: 'change' }]">
                  <el-select v-model="submitListing.doorStyle" placeholder="请选择柜门风格">
                    <el-option v-for="dict in getIntDictOptions2('CABINET-doorStyle')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="结构类型" prop="constructionType" :rules="[{ required: true, message: '请输入结构类型', trigger: 'blur' }]">
                  <el-input v-model="submitListing.constructionType" maxlength="100" placeholder="结构类型"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否易碎品" prop="isFragile" :rules="[{ required: true, message: '请选择是否易碎品', trigger: 'change' }]">
                  <el-switch v-model="submitListing.isFragile" active-text="是" inactive-text="否"></el-switch>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="特别功能" prop="specialFeature" :rules="[{ required: true, message: '请选择特别功能', trigger: 'blur' }]">
                  <el-select v-model="submitListing.specialFeature" placeholder="请选择特别功能">
                    <el-option v-for="dict in getIntDictOptions2('CABINET-specialFeature')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </template>

          <!-- 货架所需字段 -->
          <template v-if="submitListing.productType === 'SHELF'">
            <h3 class="type-title">货架属性</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="材料" prop="material" :rules="[{ required: true, message: '请选择材料', trigger: 'blur' }]">
                  <el-select v-model="submitListing.material" placeholder="请选择材料">
                    <el-option v-for="dict in getIntDictOptions2('SHELF-material')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="商品状况" prop="conditionType" :rules="[{ required: true, message: '请选择商品状况', trigger: 'blur' }]">
                  <el-select v-model="submitListing.conditionType" placeholder="请选择商品状况">
                    <el-option v-for="dict in getIntDictOptions2('SHELF-conditionType')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="包含组件" prop="includedComponents" :rules="[{ required: true, message: '请选择包含组件', trigger: 'blur' }]">
                  <el-select v-model="submitListing.includedComponents" placeholder="请选择包含组件">
                    <el-option v-for="dict in getIntDictOptions2('SHELF-includedComponents')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="形状" prop="itemShape" :rules="[{ required: true, message: '请选择形状', trigger: 'blur' }]">
                  <el-select v-model="submitListing.itemShape" placeholder="请选择形状">
                    <el-option v-for="dict in getIntDictOptions2('SHELF-itemShape')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="货架类型" prop="shelfType" :rules="[{ required: true, message: '请选择货架类型', trigger: 'blur' }]">
                  <el-select v-model="submitListing.shelfType" placeholder="请选择货架类型">
                    <el-option v-for="dict in getIntDictOptions2('SHELF-shelfType')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
<!--              <el-col :span="12">-->
<!--                <el-form-item label="适用年龄范围" prop="ageRangeDescription" :rules="[{ required: true, message: '请选择适用年龄范围', trigger: 'blur' }]">-->
<!--                  <el-select v-model="submitListing.ageRangeDescription" placeholder="请选择适用年龄范围">-->
<!--                    <el-option v-for="dict in getIntDictOptions2('SHELF-ageRangeDescription')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="适合房型" prop="roomType" :rules="[{ required: true, message: '请输入适合房型', trigger: 'blur' }]">
                  <el-select v-model="submitListing.roomType" placeholder="请选择结构框架材料">
                    <el-option v-for="dict in getIntDictOptions2('SHELF-roomType')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="安装类型" prop="mountingType" :rules="[{ required: true, message: '请选择安装类型', trigger: 'blur' }]">
                  <el-select v-model="submitListing.mountingType" placeholder="请选择安装类型">
                    <el-option v-for="dict in getIntDictOptions2('SHELF-mountingType')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="书架数量" prop="numberOfShelves" :rules="[{ required: true, message: '请输入书架数量', trigger: 'blur' }]">
                  <el-input v-model="submitListing.numberOfShelves" placeholder="书架数量"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结构框架材料" prop="framemMaterial" :rules="[{ required: true, message: '请选择结构框架材料', trigger: 'blur' }]">
                  <el-select v-model="submitListing.framemMaterial" placeholder="请选择结构框架材料">
                    <el-option v-for="dict in getIntDictOptions2('SHELF-framemMaterial')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="特别功能" prop="specialFeature" :rules="[{ required: true, message: '请选择特别功能', trigger: 'blur' }]">
                  <el-select v-model="submitListing.specialFeature" placeholder="请选择特别功能">
                    <el-option v-for="dict in getIntDictOptions2('SHELF-specialFeature')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </template>

          <!-- 照明灯所需字段 -->
          <template v-if="submitListing.productType === 'LIGHT_FIXTURE'">
            <h3 class="type-title">照明灯属性</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="材料" prop="material" :rules="[{ required: true, message: '请选择材料', trigger: 'blur' }]">
                  <el-select v-model="submitListing.material" placeholder="请选择材料">
                    <el-option v-for="dict in getIntDictOptions2('LIGHT_FIXTURE-material')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="商品状况" prop="conditionType" :rules="[{ required: true, message: '请选择商品状况', trigger: 'blur' }]">
                  <el-select v-model="submitListing.conditionType" placeholder="请选择商品状况">
                    <el-option v-for="dict in getIntDictOptions2('LIGHT_FIXTURE-conditionType')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="包含组件" prop="includedComponents" :rules="[{ required: true, message: '请选择包含组件', trigger: 'blur' }]">
                  <el-select v-model="submitListing.includedComponents" placeholder="请选择包含组件">
                    <el-option v-for="dict in getIntDictOptions2('LIGHT_FIXTURE-includedComponents')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="形状" prop="itemShape" :rules="[{ required: true, message: '请选择形状', trigger: 'blur' }]">
                  <el-select v-model="submitListing.itemShape" placeholder="请选择形状">
                    <el-option v-for="dict in getIntDictOptions2('LIGHT_FIXTURE-itemShape')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="适合房型" prop="roomType" :rules="[{ required: true, message: '请选择适合房型', trigger: 'blur' }]">
                  <el-select v-model="submitListing.roomType" placeholder="请选择适合房型">
                    <el-option v-for="dict in getIntDictOptions2('LIGHT_FIXTURE-roomType')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="保修说明" prop="warrantyDescription" :rules="[{ required: true, message: '请输入保修说明', trigger: 'blur' }]">
                  <el-input v-model="submitListing.warrantyDescription" maxlength="500" show-word-limit placeholder="保修说明"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="电源类型" prop="powerSourceType" :rules="[{ required: true, message: '请选择电源类型', trigger: 'blur' }]">
                  <el-select v-model="submitListing.powerSourceType" placeholder="请选择电源类型">
                    <el-option v-for="dict in getIntDictOptions2('LIGHT_FIXTURE-powerSourceType')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="产品特定用途" prop="specificUsesForProduct" :rules="[{ required: true, message: '请选择产品特定用途', trigger: 'blur' }]">
                  <el-select v-model="submitListing.specificUsesForProduct" placeholder="请选择产品特定用途">
                    <el-option v-for="dict in getIntDictOptions2('LIGHT_FIXTURE-specificUsesForProduct')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="风格" prop="style" :rules="[{ required: true, message: '请选择风格', trigger: 'blur' }]">
                  <el-select v-model="submitListing.style" placeholder="请选择风格">
                    <el-option v-for="dict in getIntDictOptions2('LIGHT_FIXTURE-style')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="室内外使用" prop="indoorOutdoorUsage" :rules="[{ required: true, message: '请选择室内室外使用情况', trigger: 'blur' }]">
                  <el-select v-model="submitListing.indoorOutdoorUsage" placeholder="请选择室内室外使用情况">
                    <el-option v-for="dict in getIntDictOptions2('LIGHT_FIXTURE-indoorOutdoorUsage')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="灯具形式" prop="lightFixtureForm" :rules="[{ required: true, message: '请选择灯具形式', trigger: 'blur' }]">
                  <el-select v-model="submitListing.lightFixtureForm" placeholder="请选择灯具形式">
                    <el-option v-for="dict in getIntDictOptions2('LIGHT_FIXTURE-lightFixtureForm')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="产品尺寸" prop="itemLengthWidthHeight" :rules="[{ required: true, message: '请输入产品尺寸', trigger: 'blur' }]">
                  <el-input v-model="submitListing.itemLengthWidthHeight" placeholder="产品尺寸（长×宽×高）"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </template>

          <!-- 储物架所需字段 -->
          <template v-if="submitListing.productType === 'STORAGE_RACK'">
            <h3 class="type-title">储物架属性</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="适合搁置的房型" prop="roomType" :rules="[{ required: true, message: '请选择适合搁置的房型', trigger: 'blur' }]">
                  <el-select v-model="submitListing.roomType" placeholder="请选择适合搁置的房型">
                    <el-option v-for="dict in getIntDictOptions2('STORAGE_RACK-roomType')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="安装类型" prop="mountingType" :rules="[{ required: true, message: '请选择安装类型', trigger: 'blur' }]">
                  <el-select v-model="submitListing.mountingType" placeholder="请选择安装类型">
                    <el-option v-for="dict in getIntDictOptions2('STORAGE_RACK-mountingType')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="特别功能" prop="specialFeature" :rules="[{ required: true, message: '请选择特别功能', trigger: 'blur' }]">
                  <el-select v-model="submitListing.specialFeature" placeholder="请选择特别功能">
                    <el-option v-for="dict in getIntDictOptions2('STORAGE_RACK-specialFeature')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="架子数量" prop="numberOfShelves" :rules="[{ required: true, message: '请输入架子数量', trigger: 'blur' }]">
                  <el-input v-model="submitListing.numberOfShelves" placeholder="架子数量"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </template>

          <!-- 衣架所需字段 -->
          <template v-if="submitListing.productType === 'CLOTHES_RACK'">
            <h3 class="type-title">衣架属性</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="产品推荐用途" prop="recommendedUsesForProduct" :rules="[{ required: true, message: '请选择产品推荐用途', trigger: 'blur' }]">
                  <el-select v-model="submitListing.recommendedUsesForProduct" placeholder="请选择产品推荐用途">
                    <el-option v-for="dict in getIntDictOptions2('CLOTHES_RACK-recommendedUsesForProduct')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="特别功能" prop="specialFeature" :rules="[{ required: true, message: '请选择特别功能', trigger: 'blur' }]">
                  <el-select v-model="submitListing.specialFeature" placeholder="请选择特别功能">
                    <el-option v-for="dict in getIntDictOptions2('CLOTHES_RACK-specialFeature')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="安装类型" prop="installationType" :rules="[{ required: true, message: '请选择安装类型', trigger: 'blur' }]">
                  <el-select v-model="submitListing.installationType" placeholder="请选择安装类型">
                    <el-option v-for="dict in getIntDictOptions2('CLOTHES_RACK-installationType')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </template>

          <!-- 置物架所需字段 -->
          <template v-if="submitListing.productType === 'CADDY'">
            <h3 class="type-title">置物架属性</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="产品特定用途" prop="specificUsesForProduct" :rules="[{ required: true, message: '请选择产品特定用途', trigger: 'blur' }]">
                  <el-select v-model="submitListing.specificUsesForProduct" placeholder="请选择产品特定用途">
                    <el-option v-for="dict in getIntDictOptions2('CADDY-specificUsesForProduct')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="特别功能" prop="specialFeature" :rules="[{ required: true, message: '请选择特别功能', trigger: 'blur' }]">
                  <el-select v-model="submitListing.specialFeature" placeholder="请选择特别功能">
                    <el-option v-for="dict in getIntDictOptions2('CADDY-specialFeature')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="安装类型" prop="mountingType" :rules="[{ required: true, message: '请选择安装类型', trigger: 'blur' }]">
                  <el-select v-model="submitListing.mountingType" placeholder="请选择安装类型">
                    <el-option v-for="dict in getIntDictOptions2('CADDY-mountingType')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </template>

          <!-- 晾衣架所需字段 -->
          <template v-if="submitListing.productType === 'DRYING_RACK'">
            <h3 class="type-title">晾衣架属性</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="产品推荐用途" prop="recommendedUsesForProduct" :rules="[{ required: true, message: '请选择产品推荐用途', trigger: 'blur' }]">
                  <el-select v-model="submitListing.recommendedUsesForProduct" placeholder="请选择产品推荐用途">
                    <el-option v-for="dict in getIntDictOptions2('DRYING_RACK-recommendedUsesForProduct')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="特别功能" prop="specialFeature" :rules="[{ required: true, message: '请选择特别功能', trigger: 'blur' }]">
                  <el-select v-model="submitListing.specialFeature" placeholder="请选择特别功能">
                    <el-option v-for="dict in getIntDictOptions2('DRYING_RACK-specialFeature')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="通用关键字" prop="genericKeyword" :rules="[{ required: true, message: '请输入通用关键字', trigger: 'blur' }]">
                  <el-input v-model="submitListing.genericKeyword" placeholder="通用关键字"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="安装类型" prop="mountingType" :rules="[{ required: true, message: '请选择安装类型', trigger: 'blur' }]">
                  <el-select v-model="submitListing.mountingType" placeholder="请选择安装类型">
                    <el-option v-for="dict in getIntDictOptions2('DRYING_RACK-mountingType')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="产品合格证书" prop="requiredProductComplianceCertificate" :rules="[{ required: true, message: '请选择产品合格证书', trigger: 'blur' }]">
                  <el-select v-model="submitListing.requiredProductComplianceCertificate" placeholder="请选择产品合格证书">
                    <el-option v-for="dict in getIntDictOptions2('DRYING_RACK-requiredProductComplianceCertificate')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </template>

          <!-- 桌子所需字段 -->
          <template v-if="submitListing.productType === 'TABLE'">
            <h3 class="type-title">桌子属性</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="顶部颜色" prop="topColor" :rules="[{ required: true, message: '请选择顶部颜色', trigger: 'blur' }]">
                  <el-select v-model="submitListing.topColor" placeholder="请选择顶部颜色">
                    <el-option v-for="dict in getIntDictOptions2('TABLE-topColor')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="顶部材料" prop="topMaterial" :rules="[{ required: true, message: '请选择顶部材料', trigger: 'blur' }]">
                  <el-select v-model="submitListing.topMaterial" placeholder="请选择顶部材料">
                    <el-option v-for="dict in getIntDictOptions2('TABLE-topMaterial')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="基座结构类型" prop="baseType" :rules="[{ required: true, message: '请选择基座结构类型', trigger: 'blur' }]">
                  <el-select v-model="submitListing.baseType" placeholder="请选择基座结构类型">
                    <el-option v-for="dict in getIntDictOptions2('TABLE-baseType')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="基础结构框架或支撑系统材料" prop="framemMaterial" :rules="[{ required: true, message: '请选择基础结构框架或支撑系统材料', trigger: 'blur' }]">
                  <el-select v-model="submitListing.framemMaterial" placeholder="请选择基础结构框架或支撑系统材料">
                    <el-option v-for="dict in getIntDictOptions2('TABLE-framemMaterial')" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="是否易碎品" prop="isFragile" :rules="[{ required: true, message: '请选择是否易碎品', trigger: 'change' }]">
              <el-switch v-model="submitListing.isFragile" active-text="是" inactive-text="否"></el-switch>
            </el-form-item>
          </template>


        </el-form>
      </div>
      <template #footer>
        <div>
          <el-button @click="state.dialogVisible = false">取消</el-button>
          <el-popover
            title="验证结果"
            placement="top"
            trigger="click"
            :width="600"
          >
            <template #default>
              <el-table :data="issues">
                <el-table-column type="expand">
                  <template #default="{ row }">
                    <p class="text" v-text="row.message"></p>
                    <p class="text" v-text="row.attributeName"></p>
                  </template>
                </el-table-column>
                <el-table-column property="code" label="code"/>
                <el-table-column label="severity">
                  <template #default="{ row }">
                    <el-tag :type="row.severity === 'ERROR' ? 'danger' : 'warning'" effect="dark">
                      {{ row.severity }}
                    </el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </template>
            <template #reference>
<!--              <el-button type="primary" plain @click="reqValidationPreview"-->
<!--                         :disabled="state.btnLoading" :loading="state.previewBtnLoading">验证属性-->
<!--              </el-button>-->
            </template>
          </el-popover>
          <el-button type="primary" @click="reqPreSubmitListing" :disabled="state.previewBtnLoading"
                     :loading="state.btnLoading">保存
          </el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
<script setup lang="ts">
import {computed, onMounted, reactive, ref, watch} from 'vue'
import {listingTemplateNotPage, preSubmitListing, saveSubmitListing,productSubmitListing} from '@/api/common'
import {ElDrawer, ElMessage, FormInstance} from 'element-plus'
import {globalSubmitListingEvent} from '@/plugins/util/constants'
import {DICT_TYPE, getIntDictOptions2} from "@/utils/dict";
// 定义要触发的自定义事件
const emit = defineEmits(['dialog-closed'])

// 弹框关闭时的处理函数
const handleDialogClose = () => {
  // 触发自定义事件，通知父组件弹框已关闭
  emit('dialog-closed')
}
// 表单引用
const submitListingFormRef = ref<FormInstance>()
// 验证问题列表
const issues = ref<[]>()

// 接收父组件传入的参数
const props = defineProps({
  productId: {
    type: String,
    default: '',
  },
  productDto: {
    type: Object,
    default: () => ({}),
  }
})

// 状态管理
const state = reactive({
  dialogVisible: false,
  previewBtnLoading: false,
  btnLoading: false,
  // 用于标记是否是主动关闭（区分主动关闭和点击遮罩关闭）
  isActiveClose: false
})

// 表单数据对象
const submitListing = reactive({
  // 基础字段
  productType: '', // 商品类型：SEAT/TABLE/SHELF/LIGHT_FIXTURE
  templateId: '',
  description: '',
  modelName: '',
  modelNumber: '',
  standardProductIdType: 'exemption',
  standardProductIdValue: '',
  title:'',

  // 通用字段
  material: '',
  color: '',
  itemShape: '',
  isAssemblyRequired: false,
  unitCount: '',
  includedComponents: '',
  conditionType: '',
  fulfillmentChannelCode: '',
  numberOfBoxes: '',
  batteriesRequired: false,
  batteriesIncluded: false,
  supplierDeclaredDgHzRegulation: '',
  packageSize: '',
  packageWeight: '',

  // 座位字段
  seatBackInteriorHeight: '',
  seatDepth: '',
  seatHeight: '',
  seatMaterialType: '',
  isFragile: false,
  framemMaterial: '',
  maximumWeightRecommendation: '',
  numberOfDrawers: '',

  // 桌子字段
  deskDesign: '',
  baseColor: '',
  baseMaterial: '',
  finishType: '',
  topColor: '',
  topMaterial: '',
  specialFeature: '',

  // 货架字段
  shelfType: '',
  ageRangeDescription: '',
  roomType: '',
  mountingType: '',
  numberOfShelves: '',

  // 照明灯字段
  warrantyDescription: '',
  powerSourceType: '',
  specificUsesForProduct: '',
  style: '',
  indoorOutdoorUsage: '',
  lightFixtureForm: '',
  itemLengthWidthHeight: ''
})

// 监听产品数据变化，仅在抽屉打开时同步
watch(
  () => props.productDto,
  (newDto) => {
    if (newDto && Object.keys(newDto).length > 0 && state.dialogVisible) {
      syncProductDtoToSubmitListing();
    }
  },
  { deep: true }
)

// 监听抽屉显示状态变化
watch(
  () => state.dialogVisible,
  (newVal, oldVal) => {
    // 当抽屉从显示变为隐藏时
    if (!newVal && oldVal) {
      // 延迟重置，确保抽屉动画完成
      setTimeout(() => {
        resetFormData();
        submitListingFormRef.value?.clearValidate();
      }, 300);
    }
  }
)

// 同步产品数据到表单
const syncProductDtoToSubmitListing = () => {
  const { productDto } = props;
  if (!productDto) return;

  // 深拷贝避免引用问题
  const temp = JSON.parse(JSON.stringify(productDto));
  Object.assign(submitListing, temp);
  console.log(submitListing)
  if(submitListing.standardProductIdType == null || submitListing.standardProductIdType == ""){
    submitListing.standardProductIdType = "exemption"
  }
  if(submitListing.fulfillmentChannelCode == null || submitListing.fulfillmentChannelCode == ""){
    submitListing.fulfillmentChannelCode = "AMAZON_NA"
  }
  if(submitListing.unitCount == null || submitListing.unitCount == ""){
    submitListing.unitCount = 1
  }
  if(submitListing.numberOfBoxes == null || submitListing.numberOfBoxes == ""){
    submitListing.numberOfBoxes = 1
  }
  if(submitListing.conditionType == null || submitListing.conditionType == ""){
    submitListing.conditionType = "new_new"
  }

  // 特殊字段处理
  if (productDto.bulletPoints != null) {
    submitListing.description = productDto.bulletPoints?.[0] || '';
  }
};

// 重置表单数据
const resetFormData = () => {
  Object.keys(submitListing).forEach(key => {
    if (typeof submitListing[key] === 'string') {
      submitListing[key] = '';
    } else if (typeof submitListing[key] === 'boolean') {
      submitListing[key] = false;
    } else if (typeof submitListing[key] === 'number') {
      submitListing[key] = 0;
    } else if (Array.isArray(submitListing[key])) {
      submitListing[key] = [];
    } else if (typeof submitListing[key] === 'object' && submitListing[key] !== null) {
      submitListing[key] = {};
    }
  });
  submitListing.standardProductIdType = 'exemption'
};

// 打开抽屉方法
const onOpen = () => {
  // 确保先重置
  resetFormData();

  // 显示抽屉
  state.dialogVisible = true;

  // 抽屉显示后再同步数据
  nextTick(() => {
    syncProductDtoToSubmitListing();
    // 清除验证状态
    submitListingFormRef.value?.clearValidate();
  });
};

// 处理取消
const handleCancel = () => {
  state.isActiveClose = true;
  state.dialogVisible = false;
};

// 处理抽屉关闭事件
const handleDrawerClose = () => {
  state.isActiveClose = false;
  resetFormData();
  submitListingFormRef.value?.clearValidate();
};

// 验证属性
const reqValidationPreview = () => {
  submitListingFormRef.value?.validate((valid) => {
    if (valid) {
      state.previewBtnLoading = true;
      issues.value = [];

      saveSubmitListing({
        productId: props.productDto.bsId,
        listingTemplateId: submitListing.templateId,
        validationPreview: true,
        ...submitListing,
      })
        .then((res: any) => {
          issues.value = res.data.issues;
          state.previewBtnLoading = false;
          ElMessage.success('验证成功');
        })
        .catch(() => {
          state.previewBtnLoading = false;
        });
    }
  });
};

// 保存提交
const reqPreSubmitListing = () => {
  submitListingFormRef.value?.validate((valid) => {
    if (valid) {
      state.btnLoading = true;
      productSubmitListing({
        productId: props.productId,
        listingTemplateId: submitListing.templateId,
        ...submitListing,
      })
        .then((res: any) => {
          globalSubmitListingEvent.value = res.timestamp + '';
          state.btnLoading = false;
          state.dialogVisible = false;
          ElMessage.success('操作成功');
          handleDialogClose();
        })
        .catch(() => {
          state.btnLoading = false;
        });
    }
  });
};

// 模板列表
const templateList = reactive<any[]>([])
const reqListingTemplateNotPage = () => {
  listingTemplateNotPage().then((res: any) => {
    templateList.length = 0; // 清空现有数据
    res.data.forEach((ite: any) => {
      templateList.push({
        value: ite.id,
        label: ite.name,
      });
    });
  });
};

// 初始化
onMounted(() => {
  reqListingTemplateNotPage();
});

// 暴露方法给父组件
defineExpose({
  onOpen
});
</script>

<style scoped lang="scss">
.type-title {
  margin: 15px 0 10px;
  padding-left: 5px;
  font-size: 16px;
  font-weight: 600;
  color: #1f2329;
  border-left: 3px solid #409eff;
}

:deep(.el-form-item) {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

:deep(.el-input),
:deep(.el-select),
:deep(.el-switch) {
  width: 100%;
}

:deep(.el-textarea) {
  width: 100%;
  min-height: 100px;
}
</style>
